<template>
<div class="noticeList">
  <!-- 头部tab -->
  <div class="header-wrap">
    <span class="header-wrap-left" @click="goback">
      <i class="iconback iconfont icon-fanhui"></i>
    </span>
    <span class="header-wrap-text">小区公告</span>
    <span class="header-wrap-right">
    </span>
  </div>
  <div class="noticeList-box">
    <div class="noticeList-content"  v-for="(list,index) in listData" :key="index" @click="goNoticeDetail(list.id)">
      <div class='noticeSwiper-img-box'>
        <img class="noticeSwiper-img" v-lazy="list.image" v-if="list.image" :src="list.image" alt="">
        <img class="noticeSwiper-img" v-else src="@/assets/images/maxSwiper.png" alt="">
      </div>
      <div class="noticeSwiper-content">
        <div class="noticeSwiper-list">
          <span class="noticeSwiper-tittle">{{list.title}}</span>
          <span class="noticeSwiper-price">{{list.createtime_text}}</span>
          <span class="noticeSwiper-rate">
            <!-- <van-rate
              style="width: auto;margin-right:.1rem;"
              readonly
              v-model="list.star"
              allow-half
              void-icon="star"
              void-color="#6b5da6"
              color= '#ffa272'
              @change= 'change(index)'
              size= ".35rem"
            />  -->
            <span class="number">
              <!-- <span>(333)</span> -->
              <span class="collection" @click.stop="favor(index,list.id)" v-if="list.favor"><img src="@/assets/images/collection-color.png" alt=""></span>
              <span class="collection" @click.stop="favor(index,list.id)" v-else><img src="@/assets/images/collection.png" alt=""></span>
            </span>
          </span>
        </div>
      </div>
    </div>
    <Tips v-if="show"/>
  </div>
</div>
</template>
<script>
import api from '../../api/api.js'
import { Rate,Lazyload } from 'vant';
import Tips from '../../components/tips'
export default {
  data(){
    return{
      show: false,
      length: null,
      listData : [],
      host:api.host
    }
  },
  created(){
    this.getList()
  },
  methods:{
    goback(){
      this.$router.push('/')
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
    goNoticeDetail(id){
      const dome = -1
      this.$router.push({
        path: '/noticeDetail',
        query: {
          id,
          dome
        }
      })
    },
    // 收藏
    favor(index,id){
      this.listData[index].favor = !this.listData[index].favor
      this.$get(api.favor,{
        params: {
 　　     id: id,
          type: 'Notice'
        }
      })
      .then((response) => {
        if(response.data.code==1){
          if(this.listData[index].favor==true){
            this.$toast('收藏成功')
          }else{
            this.$toast('收藏取消')
          }
        }
      })
      .catch((error) => {
          console.log(error);
      });
    },
    // 小区公告数据
    getList(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.exhibition, {})
      .then((response) => {
        if(response.data.code===1){
          this.listData = response.data.data.list
          this.length = response.data.data.total
          this.$toast.clear();
          if(this.length<=0){
            this.show = true
          }else{
            this.show = false
          }
        }
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error);
      });
    },
  },
  components:{
    [Rate.name]: Rate,
    [Lazyload.name]: Lazyload,
    Tips
  }
}
</script>
<style scoped>
.noticeList-box{
  padding: 1.5rem 0 .5rem;
}
.noticeList{
  background: #fff;
  margin:0 .35rem;
}
.noticeList-content{
  /* border:.02rem solid #fff; */
  margin-bottom: .35rem;
  height: auto;
  background: #f7f6fb;
}
.noticeList-content:nth-last-child(1){
  margin-bottom: 0;
}
.noticeSwiper{
  padding-bottom: 3rem;
  width: 100%;
  height: auto;
}
.noticeSwiper-img-box{
  width: 100%;
  height: 5rem;
  overflow: hidden;
  border-radius: .2rem .2rem 0 0;
  background: #f7f6fb;
}
.noticeSwiper-img{
  width: 100%;
  height: 100%;
  border-radius: .2rem .2rem 0 0;
}
.swiper-slide{
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.type{
  font-size: .32rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.noticeSwiper-content{
  border-radius: 0 0 .2rem .2rem;
  height: 1.5rem;
}
.noticeSwiper-list{
  position: relative;
  margin-left: .28rem;
  font-weight: bold;
}
.noticeSwiper-tittle{
  font-size: .32rem;
  display: block;
  padding-top: .3rem;
  width: 88%;
  height: auto;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.noticeSwiper-price{
  display: block;
  width: 88%;
  height: .4rem;
  line-height: .4rem;
  margin: .2rem 0;
  color: #ee5a8a;
}
.noticeSwiper-rate{
  display: flex;
  position: absolute;
  top: 0.8rem;
  right: 0rem;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
.number{
  display: flex;
  flex: 1.5;
  color: #6b5da6;
}
.number span{
  flex: 1;
}
.number span img{
  width: .4rem;
  height: .4rem;
}
.collection{
  display: inline-block;
  text-align: right;
  margin-right: .35rem;
}
</style>

